<template>
	<view>
		<view class="tabbar tabbar-primary tabbar-shadow">
			<view 
				class="tabbar-item-col"
				:class="[ 
					value === 0 ? 'active' : ''
				]"
				@click="handleClickTab(0)"
			>
				<image v-if="value === 0" class="tabbar-icon" src="../../static/tab_goods_active.png"></image>
				<image v-else class="tabbar-icon" src="../../static/tab_goods.png"></image>
				标品展示
			</view>
			<image v-if="isAdmin" class="tabbar-mid" src="../../static/release_btn.png" @click="$g.onPageJump('goods-release')"></image>
			<view 
				class="tabbar-item-col"
				:class="[ 
					value === 1 ? 'active' : ''
				]"
				@click="handleClickTab(1)"
			>
				<image v-if="value === 1" class="tabbar-icon" src="../../static/tab_my_active.png"></image>
				<image v-else class="tabbar-icon" src="../../static/tab_my.png"></image>
				我的投标
			</view>
		</view>
		<view class="tabbar-fill"></view>
	</view>
</template>

<script>
export default {
	name: '',
	props: {
		// 当前选中的tab的下标
		value: {
			type: Number,
			default: 0
		},
	},
	computed: {
		isAdmin() {
			return this.$store.state.user.userInfo.is_admin;
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClickTab(index) {
			this.$emit('clicktab', index);
			this.$emit('input', index);
		}
	}
};
</script>
<style lang="scss" scoped>
	
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 140rpx;
	z-index: $z-index-tabbar;
	display: flex;
	color: #444;

	&-item-col {
		flex: 1 0 1%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 28rpx;
		background-color: #fff;
	
		.tabbar-icon {
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 4rpx;
		}
	}
	
	&-shadow {
		box-shadow: 0px -3rpx 10rpx 0px rgba(0, 0, 0, 0.1);
	}

	&-fill {
		height: 140rpx;
		width: 100%;
	}
}
.tabbar-mid {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}
.tabbar .active {
	color: $type-primary;
}
</style>
